<template>
  <el-dialog  draggable overflow v-model="visible" :title="titleMap[mode]" :width="1024" destroy-on-close @closed="$emit('closed')">
    <sk-tabs type="border-card" v-loading="digloading">
      <el-tab-pane ref="tab" label="基础信息">
        <el-form :model="form" :rules="rules" ref="dialogForm">
          <el-row>
            <el-col :span="14">

              <el-descriptions :column="2" border label-align="right">

                <el-descriptions-item label-class-name="light-blue">
                  <template #label>
                    选择色族
                  </template>
                  <el-form-item prop="colorgroup_id">
                    <skDicSelect v-model="form.colorgroup_id" :code="'colorgroup'" :placeholder="'请选择色族'">
                    </skDicSelect>
                  </el-form-item>
                </el-descriptions-item>


                <el-descriptions-item>
                  <template #label>客户</template>
                  {{ form.main.customer.name }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="light-blue">
                  <template #label>染厂色名</template>
                  <el-form-item prop="name">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </el-descriptions-item>
                <!-- <el-descriptions-item label-class-name="light-blue">
                  <template #label>浴法</template>
                  <el-form-item prop="dyebath_id">
                    <skDicSelect v-model="form.dyebath_id" :code="'Dyebath'" :placeholder="'请选择浴法'">
                    </skDicSelect>
                  </el-form-item>
                </el-descriptions-item> -->
                <el-descriptions-item>
                  <template #label>染厂色号</template>
                  <el-input v-model="form.code" :placeholder="'自动生成'" :disabled="true"></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template #label>手感</template>
                  {{ form.main.forhand }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>颜色</template>
                  {{ form.main.forcolor }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>用途</template>
                  {{ form.main.usefor }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>其他</template>
                  {{ form.main.remark }}
                </el-descriptions-item>



                <el-descriptions-item>
                  <template #label>产品</template>
                  {{ form.material.spec }} {{ form.material.name }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template #label>客户色号</template>
                  {{ form.code_en }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>客户色名</template>
                  {{ form.code_en_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template #label>寄样地址</template>
                  {{ form.main.address }}
                </el-descriptions-item>
              </el-descriptions>

            </el-col>
            <el-col :span="10">
              <sk-upload v-model="form.main.attachments" :limit="10" draggable tip="单个文件不要超过10M,请上传图像格式文件">
              </sk-upload>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </sk-tabs>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skDicSelect, },
  data() {
    return {
      mode: "add",
      dialog: { save: false },
      digloading: false,
      countApply: 0,
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      form: {
        material: {},
        attachments: [],
      },
      rules: {
        colorgroup_id: { required: true, message: "请选择色族" },
        dyebath_id: { required: true, message: "请选择浴法" },
        name: { required: true, message: "染厂色名必填" }
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {

  },
  methods: {

    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.$API.pro.colorApply.saveColor.post(this.form).then((res) => {
            if (res.code == 200) {
              this.$emit("success", this.form, this.mode);
              this.visible = false;
              this.$message.success("操作成功");
            }
          })
            .finally(() => {
              this.isSaveing = false;
            })
        }
      });
    },

    //表单注入数据
    setData(data) {
      this.form = Object.assign({}, this.$TOOL.removeNull(data));
      // this.getInfo(data.main_id);
    },
  },
};
</script>
